<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<link rel="stylesheet" type="text/css" href="css/element.css" />
		<link rel="stylesheet" type="text/css" href="css/reset.css" />
		<link rel="stylesheet" type="text/css" href="css/pageCss.css" />
		<link rel="stylesheet" type="text/css" href="css/common.css" />
		<script src="js/jquery-3.5.1.js"></script>
		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/element.js" type="text/javascript" charset="utf-8"></script>

	</head>
	<body>
		<div id="app">

			<div id="head">
				<div class="h_title">数据助手</div>
				<ul class="menu">
					<li>导出</li>
					<li><i class="el-icon-setting"></i> 设置</li>
				</ul>
			</div>

			<div id="content">
				<div id="left">
					<el-menu default-active="1" class="" @select='menuClick'>
						<el-menu-item index="1">
							<i class="el-icon-menu"></i>
							<template #title>样品数据</template>
						</el-menu-item>
						<el-menu-item index="2">
							<i class="el-icon-document"></i>
							<template #title>现场记录</template>
						</el-menu-item>
						<el-menu-item index="3">
							<i class="el-icon-setting"></i>
							<template #title>扦插照片</template>
						</el-menu-item>
					</el-menu>
				</div>

				<div id="right">
					<div class="page_root" v-show="menuIdx==1">
						<el-tabs v-model="ypItemActive" type="card" editable @edit="handleTabsEdit">
							<el-tab-pane v-for="(item, index) in ypList" :label="item.title" :name='item.name'>
								123
							</el-tab-pane>
						</el-tabs>
					</div>

					<div class="xcjl page_root" v-show="menuIdx==2">
						<div class="xcjl_root">
							<el-card class="box-card">
								<div class="title title1">种子质量监督抽查扦样现场记录单</div>
								<div class="xcjl-msg">
									<el-row>
										<el-col :span="14">
											<el-row>
												<el-col :span="6">
													<div class="label">扦样单位：</div>
												</el-col>
												<el-col :span="18">
													<div><u>广州市农作物种子质量检验中心</u></div>
												</el-col>
											</el-row>
										</el-col>
										<el-col :span="10">
											<el-row>
												<el-col :span="6">
													<div class="label">扦样时间：</div>
												</el-col>
												<el-col :span="18">
													<div><u>2021年5月12日</u></div>
												</el-col>
											</el-row>
										</el-col>
									</el-row>
									<el-row>
										<el-col :span="14">
											<el-row>
												<el-col :span="6">
													<div class="label">扦样人员：</div>
												</el-col>
												<el-col :span="18">
													<div>
														<el-select v-model="value" placeholder="请选择">
														    <el-option
														      v-for="item in options"
														      :key="item.value"
														      :label="item.label"
														      :value="item.value"
														    >
														    </el-option>
														</el-select>
													</div>
												</el-col>
											</el-row>
										</el-col>
										<el-col :span="10">
											<el-row>
												<el-col :span="6">
													<div class="label">记录人：</div>
												</el-col>
												<el-col :span="18">
													<div><u>周贤玉</u></div>
												</el-col>
											</el-row>
										</el-col>
									</el-row>
									<el-row>
										<el-col :span="14">
											<el-row>
												<el-col :span="6">
													<div class="label">扦样地点：</div>
												</el-col>
												<el-col :span="18">
													<div><u>0</u></div>
												</el-col>
											</el-row>
										</el-col>
										<el-col :span="10">
											<el-row>
												<el-col :span="6">
													<div class="label">受检单位类型：</div>
												</el-col>
												<el-col :span="18">
													<div><u>企业</u></div>
												</el-col>
											</el-row>
										</el-col>
									</el-row>
									<el-row>
										<el-col :span="14">
											<el-row>
												<el-col :span="6">
													<div class="label">受检单位陪同负责人：</div>
												</el-col>
												<el-col :span="18">
													<div><u>啊哈哈</u></div>
												</el-col>
											</el-row>
										</el-col>
										<el-col :span="10">
											<el-row>
												<el-col :span="6">
													<div class="label">联系电话：</div>
												</el-col>
												<el-col :span="18">
													<div><u>123456</u></div>
												</el-col>
											</el-row>
										</el-col>
									</el-row>
								</div>
								
								<div class="title title2"><u>具体现场记录内容</u></div>
								<div class="xcjl-content">
									<ul>
										<li>1. 扦样单位扦样人员向被抽查单位提供了《广州市2021年农作物种子质量监督抽查通知书》（编号：GZ-001），出示了种子检验员证 等工作证件；介绍了本次抽查任务的性质和扦样方法、检验项目、检验依据、判定依据等内容，以及被抽查单位配合监督抽查的权利和义务。</li>
										<li>
											<u>2. 经询问被抽查单位  "&扦样单1!C6&"  和查看生产经营档案，被抽查单位仓库内待销的种子品种有："&扦样单1!C12&"（"&扦样单1!C11&"）等  个品种。</u>
										</li>
										<li>
											<u>3. 扦样人员随机抽查"&扦样单1!C12&"等品种的种子，并按照《农作物种子检验规程》（GB/T 3543.1～7-1995）规定的技术要求完成扦样，扦样信息见《种子检验扦样单》（编号："&扦样单1!C5&"～"&扦样单3!C5&"）。本次抽查的样品信息如下：</u>
										</li>
									</ul>
									
									<div class="xcjl-table">
										<el-table border :data="tableData" style="width: 100%">
										    <el-table-column prop="col1" label="种类"> </el-table-column>
										    <el-table-column prop="col2" label="生产商" width="200"> </el-table-column>
										    <el-table-column prop="col3" label="主要销往"> </el-table-column>
										    <el-table-column prop="col4" label="繁种总量(kg)"> </el-table-column>
										    <el-table-column prop="col5" label="繁种时间" width="100"> </el-table-column>
										    <el-table-column prop="col6" label="繁种地点" width="200"> </el-table-column>
										    <el-table-column prop="col7" label="繁种价"> </el-table-column>
										    <el-table-column prop="col8" label="繁种联系人"> </el-table-column>
										    <el-table-column prop="col9" label="种子生产经营许可证编号" width="300"> </el-table-column>
										    <el-table-column prop="col10" label="检疫证明编号" width="300"> </el-table-column>
										    <el-table-column prop="col11" label="已加工包装(kg)"> </el-table-column>
										    <el-table-column prop="col12" label="入库时间" width="100"> </el-table-column>
										    <el-table-column prop="col13" label="包装规格"> </el-table-column>
										    <el-table-column prop="col14" label="包装标注检测时间" width="100"> </el-table-column>
										    <el-table-column prop="col15" label="质量保质期" width="100"> </el-table-column>
										    <el-table-column prop="col16" label="已销售(kg)"> </el-table-column>
										    <el-table-column prop="col17" label="销售价(元/kg)"> </el-table-column>
										    <el-table-column prop="col18" label="样品库存(kg)"> </el-table-column>
										    <el-table-column prop="col19" label="本次抽取(kg)"> </el-table-column>
										    <el-table-column prop="col20" label="现库存(kg)"> </el-table-column>
										</el-table>
									</div>
								</div>
							</el-card>
						</div>
					</div>

					<div class="qczp" v-show="menuIdx==3">
						扦插照片
					</div>
				</div>
			</div>
		</div>

		<script type="text/javascript">
			(function() {
				setRightHeight()
			})()

			window.onresize = function() {
				setRightHeight()
			}

			function setRightHeight() {
				$('#content #right').css('height', $(window).height() - 60)
			}
		</script>
		<script>
			new Vue({
				el: '#app',
				data: {
					// 左侧菜单标识
					menuIdx: 2,
					// 样品集合
					ypItemActive: '1',
					ypList: [{
						title: '样品1',
						name: '1'
					}],
					tableData: [{
						col12: '2016-05-02',
						col15: '王小虎',
						col2: '上海市普陀区金沙江路 1518 弄',
					}],
					options: [{
					            value: '选项1',
					            label: '黄金糕',
					          },
					          {
					            value: '选项2',
					            label: '双皮奶',
					          },
					          {
					            value: '选项3',
					            label: '蚵仔煎',
					          },
					          {
					            value: '选项4',
					            label: '龙须面',
					          },
					          {
					            value: '选项5',
					            label: '北京烤鸭',
					          },
					],
					value: '',
				},
				methods: {
					// 左侧菜单点击
					menuClick(index) {
						console.log(index)
						this.menuIdx = index
					},

					// 样品tab监听
					handleTabsEdit(targetName, action) {
						if (action === 'add') {
							let count = this.ypList.length + 1;

							if (count > 6) {
								this.$notify({
									title: '警告',
									message: '最多只能添加6个样品数据',
									type: 'warning',
									duration: 1500

								});
								return;
							}

							this.ypList.push({
								title: '样品' + count,
								name: count + ''
							});
							this.ypItemActive = count + '';
						} else if (action === 'remove') {
							let tabs = this.ypList;
							let activeName = this.ypItemActive;
							tabs.splice(parseInt(targetName) - 1, 1);

							var arr = []
							tabs.forEach((item, index) => {
								var idx = index + 1
								arr.push({
									title: '样品' + idx,
									name: idx + ''
								})
							})

							if (activeName === targetName) {
								activeName = '1'
							} else {
								activeName = arr.length + ''
							}

							this.ypItemActive = activeName;
							this.ypList = arr;
						}
					},

				}
			})
		</script>
	</body>
</html>
